<script lang="ts" setup>
  import { useAppStore } from '@/store';
  import { onBeforeMount, ref, onMounted, onBeforeUnmount } from 'vue';
  import {
    CourseItem,
    CourseTransport,
    CourseFood,
    CourseHotel,
    CourseTravel,
    CourseSeason,
    CourseFairway,
  } from '@/types/course';
  import { getCourseDetail } from '@/api/course';
  import { useRoute } from 'vue-router';
  import ProvinceJSON from '@/config/province.json';
  import CityJSON from '@/config/city.json';
  import PicAlbum from '@/components/pic-album/index.vue';
  import useTable from '@/hooks/table';
  import { Caddie } from '@/types/caddie';
  import { getCourseUserList } from '@/api/caddie';
  import { api as viewerApi } from 'v-viewer';
  import CaddieList from './caddie/index.vue';
  import HandicapBind from '../components/handicap-bind/index.vue';
  import CupDetail from './cup-detail.vue';

  const appStore = useAppStore();

  onBeforeMount(() => {
    appStore.updateSettings({
      menu: false,
    });
  });

  onBeforeUnmount(() => {
    appStore.updateSettings({
      menu: true,
    });
  });

  const route = useRoute();

  const loadingDetail = ref(false);
  const courseDetail = ref<CourseItem | null>(null);
  const initCourseData = async () => {
    try {
      loadingDetail.value = true;
      const res = await getCourseDetail(route.query.id as string);
      courseDetail.value = res.data.data || {};

      if (courseDetail.value.pics) {
        courseDetail.value.picList = JSON.parse(
          `${courseDetail.value.pics}` || '[]'
        );
      }
      if (courseDetail.value.honor) {
        courseDetail.value.honorList = JSON.parse(
          courseDetail.value.honor
        ) as string[];
      }
      if (courseDetail.value.station) {
        courseDetail.value.stationList = JSON.parse(
          courseDetail.value.station
        ) as CourseTransport[];
      }
      if (courseDetail.value.airport) {
        courseDetail.value.airportList = JSON.parse(
          courseDetail.value.airport
        ) as CourseTransport[];
      }
      if (courseDetail.value.facility) {
        courseDetail.value.facilityList = JSON.parse(
          courseDetail.value.facility
        ) as string[];
      }
      if (courseDetail.value.food) {
        courseDetail.value.foodList = JSON.parse(
          courseDetail.value.food
        ) as CourseFood[];
      }
      if (courseDetail.value.hotel) {
        courseDetail.value.hotelList = JSON.parse(
          courseDetail.value.hotel
        ) as CourseHotel[];
      }
      if (courseDetail.value.recommendHotel) {
        courseDetail.value.recommendHotelList = JSON.parse(
          courseDetail.value.recommendHotel
        ) as CourseHotel[];
      }
      if (courseDetail.value.recommendScene) {
        courseDetail.value.recommendSceneList = JSON.parse(
          courseDetail.value.recommendScene
        ) as CourseTravel[];
      }
      if (courseDetail.value.season) {
        courseDetail.value.seasonList = JSON.parse(
          courseDetail.value.season
        ) as CourseSeason[];
      }
      if (courseDetail.value.courseCups) {
        courseDetail.value.courseCups.forEach((cup) => {
          if (cup.fieldStyle) {
            cup.fieldStyles = JSON.parse(cup.fieldStyle) as string[];
          }
          if (cup.fairway) {
            cup.fairwayList = JSON.parse(cup.fairway) as CourseFairway[];
          }
        });
      }
    } finally {
      loadingDetail.value = false;
    }
  };

  const bindingHandicapCourse = ref(false);
  const handleBindHandicapCourseDone = (refresh: boolean) => {
    bindingHandicapCourse.value = false;
    if (refresh) {
      initCourseData();
    }
  };

  const showCaddie = ref(false);
  const { total: caddieTotal } = useTable<Caddie>();
  const getCaddieData = async () => {
    try {
      const res = await getCourseUserList({
        pageIndex: 1,
        pageSize: 1,
        courseId: route.query.id,
        valid: 1,
      });
      caddieTotal.value = res?.data?.data?.total || 0;
    } finally {
      // do nothing
    }
  };

  onMounted(() => {
    initCourseData();
    getCaddieData();
  });

  const previewImage = (url: string) => {
    viewerApi({
      images: [url],
      options: {
        navbar: false,
      },
    });
  };
</script>

<template>
  <div class="main">
    <a-skeleton v-if="loadingDetail" animation>
      <a-space direction="vertical" :style="{ width: '100%' }" size="large">
        <a-skeleton-line :rows="3" />
      </a-space>
    </a-skeleton>
    <a-row :gutter="20">
      <a-col :span="18">
        <div v-if="courseDetail" class="course">
          <div class="course-title">
            <img
              v-if="courseDetail.logo"
              :src="courseDetail.logo"
              alt="logo"
              @click="previewImage(courseDetail.logo)"
            />
            <div>{{ courseDetail.name }}</div>
          </div>

          <div class="course-basic">
            <div>
              {{
                ProvinceJSON.find((i) => i.id === courseDetail?.province)?.name
              }}
              /
              {{
                (
                  CityJSON[courseDetail.province as keyof typeof CityJSON] || []
                ).find((i) => i.id === courseDetail?.city)?.name
              }}
            </div>
            <div> {{ courseDetail.address }} </div>
          </div>

          <div style="margin: 10px 0 30px">
            <table class="common-table" :cellpadding="0" :cellspacing="0">
              <tr class="common-table-row">
                <td
                  style="
                    width: 120px;
                    padding: 12px;
                    background: rgb(var(--gray-1));
                  "
                >
                  练习场打位数
                </td>
                <td>{{ courseDetail.practiceCount }}</td>
                <td
                  style="
                    width: 120px;
                    padding: 12px;
                    background: rgb(var(--gray-1));
                  "
                >
                  真草打位
                </td>
                <td>{{ courseDetail.grass ? '是' : '否' }}</td>
              </tr>
              <tr class="common-table-row">
                <td
                  style="
                    width: 120px;
                    padding: 12px;
                    background: rgb(var(--gray-1));
                  "
                >
                  练习果岭
                </td>
                <td>{{ courseDetail.green ? '有' : '无' }}</td>
                <td
                  style="
                    width: 120px;
                    padding: 12px;
                    background: rgb(var(--gray-1));
                  "
                >
                  练习沙坑
                </td>
                <td>{{ courseDetail.sand ? '有' : '无' }}</td>
              </tr>
            </table>
          </div>

          <div v-if="courseDetail.courseCups" class="card">
            <div class="card-title">场地信息</div>
            <div>
              <CupDetail
                :course-detail="courseDetail"
                :course-cups="courseDetail.courseCups"
                :course-office-id="courseDetail.officeId"
                show-sync
                @update="initCourseData"
              />
            </div>
          </div>

          <div v-if="courseDetail.honorList" class="card">
            <div class="card-title">球场荣誉</div>
            <div>
              <div
                v-for="(honor, index) in courseDetail.honorList"
                :Key="index"
                style="line-height: 34px"
              >
                {{ index + 1 }}. {{ honor }}
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-title">联系信息</div>
            <div style="width: 60%">
              <table class="common-table" :cellpadding="0" :cellspacing="0">
                <tr class="common-table-row">
                  <td
                    style="
                      width: 120px;
                      padding: 12px;
                      background: rgb(var(--gray-1));
                    "
                  >
                    联系人名称
                  </td>
                  <td>{{ courseDetail.contactName }}</td>
                </tr>
                <tr class="common-table-row">
                  <td
                    style="
                      width: 120px;
                      padding: 12px;
                      background: rgb(var(--gray-1));
                    "
                  >
                    联系人电话
                  </td>
                  <td>{{ courseDetail.contactTel }}</td>
                </tr>
                <tr class="common-table-row">
                  <td
                    style="
                      width: 120px;
                      padding: 12px;
                      background: rgb(var(--gray-1));
                    "
                  >
                    联系邮箱
                  </td>
                  <td>{{ courseDetail.contactEmail }}</td>
                </tr>
              </table>
            </div>
          </div>

          <div class="card">
            <div class="card-title">收款信息</div>
            <div style="width: 60%">
              <table class="common-table" :cellpadding="0" :cellspacing="0">
                <tr class="common-table-row">
                  <td
                    style="
                      width: 120px;
                      padding: 12px;
                      background: rgb(var(--gray-1));
                    "
                  >
                    账户名称
                  </td>
                  <td>{{ courseDetail.bankAccount }}</td>
                </tr>
                <tr class="common-table-row">
                  <td
                    style="
                      width: 120px;
                      padding: 12px;
                      background: rgb(var(--gray-1));
                    "
                  >
                    账户号码
                  </td>
                  <td>{{ courseDetail.bankNumber }}</td>
                </tr>
                <tr class="common-table-row">
                  <td
                    style="
                      width: 120px;
                      padding: 12px;
                      background: rgb(var(--gray-1));
                    "
                  >
                    开户银行
                  </td>
                  <td>{{ courseDetail.bankName }}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>

        <div class="card">
          <div class="card-title">营业执照</div>
          <div>
            <img
              :src="courseDetail?.license"
              alt="license"
              style="max-width: 100%"
            />
          </div>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="card">
          <div class="card-title">绑定差点系统</div>
          <div>
            <span v-if="courseDetail?.officeId">已绑定</span>
            <span v-else>
              未绑定
              <a-link @click="bindingHandicapCourse = true">去绑定</a-link>
            </span>
          </div>
        </div>
        <div class="card">
          <div class="card-title">球场图片</div>
          <div>
            <PicAlbum :pics="courseDetail?.picList" />
          </div>
        </div>

        <div class="card">
          <div class="card-title">球童</div>
          <div>
            <a-space>
              <span>
                已入驻
                <strong style="color: rgb(var(--primary-6))">
                  {{ caddieTotal }}
                </strong>
                位球童
              </span>
              <a-link @click="showCaddie = true">查看</a-link>
            </a-space>
          </div>
        </div>

        <div
          v-if="courseDetail?.stationList || courseDetail?.airportList"
          class="card"
        >
          <div class="card-title">交通信息</div>
          <div class="card-content">
            <div v-if="courseDetail?.stationList" class="transport">
              <div class="transport-title">高铁/火车站</div>
              <div class="transport-content">
                <div
                  v-for="(station, index) in courseDetail.stationList"
                  :key="index"
                  class="transport-item"
                >
                  <div class="transport-name">
                    {{ index + 1 }}. {{ station.name }}
                  </div>
                  <div class="transport-kilo">
                    距离球场：{{ station.kilometers }}km
                  </div>
                </div>
              </div>
            </div>

            <div v-if="courseDetail?.airportList" class="transport">
              <div class="transport-title">机场</div>
              <div class="transport-content">
                <div
                  v-for="(station, index) in courseDetail.airportList"
                  :key="index"
                  class="transport-item"
                >
                  <div class="transport-name">
                    {{ index + 1 }}. {{ station.name }}
                  </div>
                  <div class="transport-kilo">
                    距离球场：{{ station.kilometers }}km
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-if="courseDetail?.foodList" class="card">
          <div class="card-title">球场美食</div>
          <div class="card-content">
            <div
              v-for="(food, foodIndex) in courseDetail.foodList"
              :key="foodIndex"
              class="food"
            >
              <img
                :src="food.pic"
                class="food-pic"
                alt="food"
                style="cursor: pointer"
                @click="previewImage(food.pic as string)"
              />
              <div class="food-name">{{ food.name }}</div>
            </div>
          </div>
        </div>

        <div v-if="courseDetail?.hotelList" class="card">
          <div class="card-title">配套酒店</div>
          <div class="card-content">
            <div
              v-for="(hotel, hotelIndex) in courseDetail.hotelList"
              :key="hotelIndex"
              class="hotel"
            >
              <img
                :src="hotel.pic"
                class="hotel-pic"
                alt="hotel"
                style="cursor: pointer"
                @click="previewImage(hotel.pic as string)"
              />
              <div class="hotel-info">
                <div class="hotel-name">
                  {{ hotel.name }}
                </div>
                <div class="hotel-other"> 房间数：{{ hotel.roomCount }} </div>
                <div class="hotel-other">
                  {{ hotel.address }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-if="courseDetail?.recommendHotelList" class="card">
          <div class="card-title">周边推荐酒店</div>
          <div class="card-content">
            <div
              v-for="(hotel, hotelIndex) in courseDetail.recommendHotelList"
              :key="hotelIndex"
              class="hotel"
            >
              <img
                :src="hotel.pic"
                class="hotel-pic"
                alt="hotel"
                style="cursor: pointer"
                @click="previewImage(hotel.pic as string)"
              />
              <div class="hotel-info">
                <div class="hotel-name">
                  {{ hotel.name }}
                </div>
                <div class="hotel-other">
                  距离球场：{{ hotel.roomCount }}km
                </div>
                <div class="hotel-other">
                  {{ hotel.address }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-if="courseDetail?.recommendSceneList" class="card">
          <div class="card-title">周边风景旅游推荐</div>
          <div class="card-content">
            <div
              v-for="(travel, travelIndex) in courseDetail.recommendSceneList"
              :key="travelIndex"
              class="travel"
            >
              <img
                :src="travel.pic"
                class="travel-pic"
                alt="hotel"
                style="cursor: pointer"
                @click="previewImage(travel.pic as string)"
              />
              <div class="travel-info">
                <div class="travel-name">
                  {{ travel.name }}
                </div>
                <div class="travel-other">
                  <a-typography-paragraph
                    :ellipsis="{
                      rows: 2,
                      showTooltip: true,
                      expandable: true,
                    }"
                  >
                    {{ travel.introduction }}
                  </a-typography-paragraph>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
    <HandicapBind
      v-if="bindingHandicapCourse && courseDetail"
      :course-id="`${courseDetail.id}`"
      :course-name="courseDetail.name"
      @close="handleBindHandicapCourseDone"
    />
    <CaddieList
      v-if="showCaddie"
      :course-id="`${route.query.id}`"
      @close="showCaddie = false"
    />
  </div>
</template>

<style lang="less" scoped>
  .main {
    width: 1100px;
    margin: 30px auto;
    padding: 20px;
  }

  .course {
    padding: 12px;
    background: #fff;
    border-radius: 4px;

    .card {
      padding: 0;
      margin-bottom: 30px;
      &:last-child {
        margin-bottom: 0;
      }
      &-title {
        font-size: 16px;
      }
    }

    &-title {
      display: flex;
      align-items: center;
      font-size: 24px;
      font-weight: 600;
      img {
        margin-right: 10px;
        width: 40px;
        height: 40px;
      }
    }

    &-basic {
      margin: 20px 0 10px;
      & > div {
        line-height: 30px;
        color: var(--color-text-1);
      }
    }
  }

  .card {
    background: #fff;
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 20px;
    &-title {
      font-weight: 600;
      margin-bottom: 10px;
    }
  }

  .transport {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(var(--gray-1));
    &:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    &-title {
      font-size: 12px;
      color: var(--color-text-2);
      margin-bottom: 8px;
    }
    &-item {
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    &-name {
      margin-bottom: 5px;
    }
    &-kilo {
      font-size: 12px;
      color: var(--color-text-3);
    }
  }

  .food {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
    &-pic {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }
    &-name {
      flex: 1;
      min-width: 0;
      word-break: break-all;
    }
  }

  .hotel {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
    &-info {
      flex: 1;
      min-width: 0;
      word-break: break-all;
    }
    &-pic {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }
    &-name {
      margin-bottom: 6px;
    }
    &-other {
      font-size: 12px;
      color: var(--color-text-3);
    }
  }

  .travel {
    display: flex;
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
    &-info {
      flex: 1;
      min-width: 0;
      word-break: break-all;
    }
    &-pic {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }
    &-name {
      margin-bottom: 6px;
    }
    &:deep(.arco-typography) {
      font-size: 12px;
      color: var(--color-text-3);
      margin-bottom: 0;
    }
  }
</style>
